<template>
	<view class="detail-wrap ">
		<scroll-view style="height: 90vh;" scroll-y="" @ >
			
			<!-- #ifdef MP-WEIXIN -->
			<shopro-login-modal></shopro-login-modal>
			<!-- #endif -->
			<public-module></public-module>
			<!-- 标题栏 -->
			<view class="nav-box">
				<view class="state-hack"></view>
			</view>
			<view class="detail_box">
				<view class="detail-content">
					<!-- 轮播 -->
					<u-swiper :height="750" borderRadius="0" :list="detailObj.goods_images"
						indicator-pos="bottomRight" mode="number" :interval="3000"></u-swiper>
					<!-- 标题 -->
					<view class="u-m-b-10 title-box u-skeleton-fillet" style="padding: 28rpx 20rpx 0;">
						<view class="price">
							￥{{detailObj.price}}
						</view>
						<view class="goods-title u-m-b-10 u-ellipsis-2">{{ detailObj.goods_name }}
						</view>
						<view class="butie-box" style="margin-top: 10rpx;margin-bottom: 30rpx;">
							<text class="butie-left">运费： {{detailObj.price}}元</text>
							<text class="butie-right">已售 : {{detailObj.sale_num}}</text>
						</view>
						
					</view>
					
					<!-- 规格 服务 -->
					<view class="middleContent">
						<view  class="middleContent-item" @click="selectShopType" v-if="orderObj.specification.sku_id">
							<text>{{orderObj.specification.title ?  '已选' : '选择'}}</text>
							<view class="content">
								{{orderObj.specification.title ?  orderObj.specification.title : '请选择规格'}}
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="middleContent-item" @click="openServerPopup">
							<text>服务</text>
							<view class="content">
								<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
								已交保证金，资质保障
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view class="middleContent-item">
							<text>优惠券</text>
							<view class="content">
								可使用满1000减50元优惠券
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<!-- 选项卡内容 -->
					<view class="tab-detail u-p-20 u-m-b-10">
						<view class="detail-title">
							商品详情
						</view>
						<!-- 详情富文本 -->
						<view class="rich-box ">
							<u-parse :html="detailObj.goods_content"></u-parse>
						</view>
					</view>

				

				</view>
			</view>
			
		</scroll-view>
		
		
		<!-- 商品foot -->
		<view class="tabbar-foot safe-area-inset-bottom" >
			<view class="detail-foot_box safe-area-inset-bottom  u-flex">
				<!-- foot左侧 -->
				<view class="left u-flex">
					<!-- 积分foot -->
					<view class="tools-item u-flex-col u-row-center" style="padding-left: 31rpx;">
						<image class="tool-img shopro-selector-circular"
							src="../../../static/images/index/index.png" mode=""></image>
						<text style="color: #C0C0C0;" @tap="$Router.pushTab({path: '/pages/index/index'});" class="tool-title shopro-selector-rect">首页</text>
					</view>
				</view>
				<!-- foot右侧 -->
				<view class="detail-right">
					<!-- 积分按钮 -->
					<view class="detail-btn-box">
						<button class="u-reset-button  score-btn" @tap="goOrder">{{ shopType==2 ? '立即兑换' : '立即购买'}}</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 服务弹窗 -->
		<bottomPopup ref="serverPopup">
			<view class="serverPopup">
				<view class="title">
					服务保障
				</view>
				<view class="content">
					<view class="contentItem">
						<view class="content-title">
							<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
							已交保证金
						</view>
						<view class="text">商家已向平台缴纳保证金，交易产生纠纷时用于保证买 家的权益</view>
					</view>
					<view class="contentItem">
						<view class="content-title">
							<image class="selectIcon" src="../../../static/images/other/selectIcon.png" mode=""></image>
							资质认证
						</view>
						<view class="text">商家已向平台提交营业执照，许可资质等相关资质证明。</view>
					</view>
					
				</view>
				<view class="btn" @click="openServerPopup()">
					好的
				</view>
			</view>
		</bottomPopup>
		
		<!-- 服务弹窗 -->
		<bottomPopup ref="specification">
			<view class="specification">
				<view class="top-content">
						<view class="cover">
							<image  :src="orderObj.specification.thumb" mode="widthFix"></image>
						</view>
						<view class="price">￥{{orderObj.specification.product_price}}
							<view class="num">
								库存：{{orderObj.specification.stock}}
							</view>
						</view>
				</view>
				<view class="middle-content">
					<text>规格</text>
					<view class="arr" v-if="orderObj.specification.sku_id">
						<view :class="item.sku_id == orderObj.specification.sku_id ? 'activeItem item' : 'item'" v-for="(item,index) in detailObj.goods_spec_list[0].value" :key="index" >
							<view class="" @click="changeSpecification(item)">
								{{item.spec_value_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom-content">
					<text>数量</text>
					<view class="count">
						<text style="color: #ABAAAA;" @click="subNum()">-</text>
						<u-input v-model="orderObj.num" @blur="numChange" class="input" type="number" border />
						<text @click="addNum">+</text>
					</view>
				</view>
				<view class="btn" @click="goOrder()">
					{{ shopType==2 ? '立即兑换' : '立即购买'}}
				</view>
			</view>
		</bottomPopup>
	</view>
</template>
<script>
	// import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	import bottomPopup  from "@/components/bottom-popup/bottom-popup.vue"
	
	import {
		mapState 
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	
	// import shPriceCard from '@/pages/index/goods-detail/components/sh-price-card.vue';
	// import shServe from '@/pages/index/goods-detail/components/sh-serve.vue';
	// import shGroupon from '@/pages/index/goods-detail/components/sh-groupon.vue';
	// import shCoupon from '@/pages/index/goods-detail/components/sh-coupon.vue';
	// import shComment from '@/pages/index/goods-detail/components/sh-comment.vue';
	export default {
		// mixins: [MescrollMixin],
		components: {
			// shPriceCard,
			// shServe,
			// shGroupon,
			// shCoupon,
			// shComment,
			// countup,
			bottomPopup,
		},
		data() {
			return {
				goodsInfo: {},
				orderObj: {
					specification: {},
					num: 0,
				},
				specificationObj:{},//规格
				specificationArr:[],
				shopType: 1 ,// 2 积分兑换
				detailObj: {},
				addressObj: {},
				goodsId: '',
				couponsArr:[ ],
			};
		},
		onShow: function() {
		
		},
		methods: {
			numChange(e){
				console.log(e);
				if(e > this.orderObj.specification.stock){
					console.log('数量不能大于库存');
					uni.showToast({
						icon: 'none',
						text: '数量不能大于库存',
						duration: 3000,
					})
					this.orderObj.num = 1
					return
				}
			},
			subNum(){
				if(this.orderObj.num==0){
					return
				}
				this.orderObj.num--
			},
			addNum(){
				if(this.orderObj.num == this.orderObj.specification.stock){
					return
				}
				this.orderObj.num++
			},
			// 规格改变
			changeSpecification(_item){
				console.log(_item);
				this.orderObj.specification = _item
				console.log(this.orderObj.specification);
			},
			selectShopType(){
				this.$refs.specification.show = !this.$refs.specification.show
			},
			getCouponsArr(_id){
				this.myHttp({
					url:'/api/orderPayment/getCouponList',
					data:{
						sku_id : _id,
					}
				}).then((res)=>{
						this.couponsArr = res.data.list
				})
			},
			goOrder(){
				if(!this.detailObj.has_many_options.length){
					this.orderObj.num = 1
					this.junit('/pages/prefile/order/orderDetail' , {type: 0,shopType: this.shopType,goodsId: this.detailObj.id,num: this.orderObj.num})
				}
				
				if(this.orderObj.num == 0){
					 this.orderObj.num = 1
					 this.$refs.specification.show = true
					 return
				}
				this.junit('/pages/prefile/order/orderDetail' , {type: 0,shopType: this.shopType,goodsId: this.detailObj.id,specificationId: this.orderObj.specification.id,num: this.orderObj.num})
			},
			openServerPopup(){
				this.$refs.serverPopup.show = !this.$refs.serverPopup.show
				if(this.$refs.serverPopup.show){
					
				}
			},
			
			getGoodsDetail(_id){
				this.myHttp({
					url:'/api/goodssku/detail',
					data:{
						sku_id : _id,
					}
				}).then((res)=>{
						this.detailObj = res.data.goods_sku_detail
						console.log(111);
						console.log(this.detailObj.goods_spec_list[0].value);
						if(this.detailObj.goods_spec_list.length){
							this.detailObj.goods_spec_list[0].value.forEach(item=>{
								if(item.selected== true){
									this.orderObj.specification = item
								}
							})
						}
						
						uni.stopPullDownRefresh()
				})
			},
			
		},
		computed: {
		},
		async onLoad({id,shopType}) {
			console.log(id);
			this.goodsId = id
			if(shopType){
				this.shopType = shopType
				console.log(this.shopType)
			}
			this.getGoodsDetail(this.goodsId)
		
		},
		onPullDownRefresh(){
			this.getGoodsDetail(this.goodsId)
		},
		// #ifdef MP-WEIXIN
		// 分享好友
		onShareAppMessage(res) {
			let shareInfo = {};
			shareInfo.path =
				`/pages/index/goods-detail/goods-detail?id=${this.$Route.query.id}&shareid=${this.userInfo.uid}`;
			shareInfo.image = this.detailObj.has_one_group.has_one_goods.thumb_url[0];
			shareInfo.title = `和我一起拼团，领${this.detailObj.has_one_group.subsidy}元商家补贴`;
			return {
				title: shareInfo.title,
				path: shareInfo.path,
				imageUrl: shareInfo.image,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				},
				complete() {}
			}
		},

		// #endif
	}
</script>

<style scoped lang="scss">
	@import '@/pages/index/goods-detail/goods-detail.scss';
</style>


<style scoped lang="scss">
	.r_bag {
		.bag1 {
			position: fixed;
			left: -46upx;
			top: 160upx;
			width: 150upx;
			height: 100upx;
			z-index: 999;
		}
	}

</style>


<style scoped lang="scss">
	.specification{
		width: 750rpx;
		height: 623rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 40rpx 33rpx 0;
		.top-content{
			display: flex;
			height: 160rpx;
			.cover{
				width: 127rpx;
				height: 127rpx;
				image{
					width: 100%;
					border-radius: 10rpx;
				}
			}
			
			.price{
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #E95F2A;
				margin-left: 33rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				.num{
					font-size: 24rpx;
					color: #b3b3b3;
					font-weight: 400;
				}
			}
			
		}
		
		text{
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.middle-content{
			flex: 1.5;
			.arr{
				display: flex;
				margin-top: 40rpx;
				.item{
					height: 48rpx;
					background: #F3F3F3;
					border-radius: 10rpx;
					color: #737373;
					padding:  0 35rpx;
					margin-right: 24rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
				.activeItem{
					background: #FFF4EF;
					color: #E9612B;
				}
			}
		}
		.bottom-content{
			flex: 1.5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.count{
				display: flex;
				align-items: center;
				text{
					margin: 0 20rpx;
				}
				.input{
					width: 120rpx;
					height: 85rpx;
				}
			}
		}
		.btn{
			width: 700rpx;
			height: 76rpx;
			background: linear-gradient(98deg, #E95E2A, #F0953E);
			border-radius: 35px;
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	
	
	
	.serverPopup{
		width: 750rpx;
		height: 533rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		.title{
			width: 100%;
			height: 90rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
			display: grid;
			place-items: center;
		}
		.content{
			flex: 1;
			padding: 0 45rpx;
			.contentItem{
				margin-top: 40rpx;
			}
			
			.content-title{
				display: flex;
				align-items: center;
				font-weight: 600;
				.selectIcon{
					width: 32rpx;
					height: 32rpx;
					margin-right: 17rpx;
				}
			}
			.text{
				color: #686868;
				padding-left: 40rpx;
				font-size: 24rpx;
			}
		}
		.btn{
			width: 700rpx;
			height: 76rpx;
			background: linear-gradient(98deg, #E95E2A, #F0953E);
			border-radius: 35px;
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	
	
	.price{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #E95F2A;
		margin-top: 15rpx;
		margin-bottom: 10rpx;
	}
	
	.tixinwarp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.tixinrect {
		width: 530upx;
		height: 450upx;
		background: #FFFFFF;
		border-radius: 10upx;

		.title-image {
			width: 217upx;
			height: 217upx;
			margin: 0 auto;
			margin-top: -110upx;
		}

		.tips {
			display: flex;
			align-content: center;
			justify-content: space-between;
			margin-top: 5upx;
			padding: 0 50upx;

			.line {
				width: 123upx;
				height: 1upx;
				background: #E5E5E5;
				margin-top: 17upx;
			}

			.title {
				font-size: 26upx;
				color: #000000;
				font-weight: bold;
			}
		}

		.tishi-content {
			font-size: 24upx;
			color: #6E6D6D;
			padding: 0 60upx;
			margin-top: 50upx;
			text-align: center;
		}

		.cancel-btn {
			width: 461upx;
			height: 65upx;
			background: #FF6027;
			border-radius: 33upx;
			text-align: center;
			line-height: 65upx;
			color: #FFFFFF;
			font-size: 28upx;
			margin: 0 auto;
			margin-top: 50upx;
		}
	}
</style>
